<template>
	<view>
		<naviTitle tit="订单" />
		<view>
			<view class="order flex-cb bg-white">
				<view class="zt_order" @click="handletab(0)" :class="{isthis:indexs == 0}">物流订单 <text v-if="num1 != 0"
						class="point">{{num1}}</text>
					<view class="hot" v-if="ishot==1"></view>
				</view>
				<view class="zt_order" @click="handletab(1)" :class="{isthis:indexs == 1}">配送订单 <text v-if="num2 != 0"
						class="point">{{num2}}</text>
					<view class="hot" v-if="ishot==3"></view>
				</view>
				<view class="zt_order" @click="handletab(2)" :class="{isthis:indexs == 2}">点餐订单<text v-if="num3 != 0"
						class="point">{{num3}}</text>
					<view class="hot" v-if="ishot==4"></view>
				</view>
				<view class="zt_order" @click="handletab(3)" :class="{isthis:indexs == 3}">自提订单<text v-if="num4 != 0"
						class="point">{{num4}}</text>
					<view class="hot" v-if="ishot==2||ishot==5"></view>
				</view>
			</view>
			<!-- <view class="tab_list flex-cb bg-white"> -->
			<!-- <view v-for="(item,index) in tablist[indexs].list" :key="index" :class="{isthis:index == isclass}" @click="handletablist(index,item.status)">
					{{item.t}}
				</view> -->
			<scroll-view scroll-x class="tab_list flex-cb bg-white" enable-flex scroll-with-animation
				:scroll-left="scrollLeft">
				<view :class="{isthis:index == isclass,thre:indexs == 1}" v-for="(item,index) in tablist[indexs].list"
					:key="index" @tap="tabSelect" :data-id="index">
					{{item.t}}
				</view>
			</scroll-view>
			<!-- </view> -->

		</view>
		<!-- 物流订单 -->
		<scroll-view scroll-y="true" class="list" v-if="indexs == 0" @scrolltolower="scrolltolower">
			<view v-for="(item,index) in WL" :key="index">
				<view v-if="status===111?1:item.status === status" class="list_item" @click="handlenavigate(item.id)">
					<view class="OrderNo flex justify-between">
						<text class="No">订单编号：{{item.order_no}}</text>
						<text
							class="text">{{item.status==0?'待支付':item.status==1?'已支付':item.status==2?'配送中':item.status==3?'已完成(待评价)'
								:item.status==4?'退款中':item.status==5?'退款完成':item.status==6?'已支付(待取餐)':item.status==7?'已评价':item.status==-1?'已取消':'拒绝退款'}}
						</text>
					</view>
					<view class="img flex">
						<view class="image_div">
							<image :src="url+item.goods[0].main_image" mode=""></image>
						</view>
						<view class="text_div">
							<view class="title flex-cb">
								<text>{{item.goods[0].title}}</text>
								<view>X{{item.goods[0].number}}</view>
							</view>
							<view class="money">
								<text>原价:￥{{item.goods[0].price}} | </text>
								<text class="vip">会员价:￥{{item.goods[0].vip_price}}</text>
							</view>
							<view class="jifeng">积分最多抵扣￥{{item.goods[0].point_price||0}}</view>
						</view>
					</view>
					<view class="Subtotal">
						<text class="num">共{{item.goods.length}}件</text>
						<text class="xiao">小计：</text>
						<text
							class="numbar">￥{{item.discount_method==0?item.amount:item.discount_method==1?item.point_amount:item.vip_amount}}</text>
					</view>
					<view class="flex justify-end">
						<view class="button" v-if="item.status ==2">查看物流</view>
						<view class="button button2" v-if="item.status==1">发货</view>
						<view class="button button2" v-if="item.status==4">退款</view>
					</view>
				</view>
				<nodata v-else />
			</view>
		</scroll-view>
		<!-- 配送订单 -->
		<scroll-view scroll-y="true" class="list list2" v-if="indexs == 1" @scrolltolower="scrolltolower">
			<view v-for="(item,index) in PS" :key="index">
				<view v-if="status===111?1:item.status === status" class="list_item flex flex-wrap"
					@click="handlenavigate(item.id)">
					<image :src="url+item.goods[0].main_image" mode=""></image>
					<view class="text_div">
						<view class="title flex-cb">
							<text>{{item.goods[0].title}}</text>
							<text
								class="text">{{item.status==0?'待支付':item.status==1?'待接单':item.status==2?'配送中':item.status==3?'已完成(待评价)'
									:item.status==4?'退款中':item.status==5?'退款完成':item.status==7?'已评价':item.status==-1?'已取消':'拒绝退款'}}</text>
						</view>
						<view class="Specifications">规格：{{item.goods[0].attribute}}</view>
						<view class="money flex align-center">
							<text>原价:￥{{item.goods[0].price}} | </text>
							<text class="vip">会员价:￥{{item.goods[0].vip_price}}</text>
						</view>
						<view class="flex-cb">
							<view class="jifeng">积分最多抵扣￥{{item.goods[0].point_price||0}}</view>
							<view style="color: #999;font-size: 30rpx;">X1</view>
						</view>
						<view class="Subtotal">
							<text class="num">共{{item.goods.length}}件</text>
							<text class="xiao">小计：</text>
							<text
								class="numbar">￥{{item.discount_method==0?item.amount:item.discount_method==1?item.point_amount:item.vip_amount}}</text>
						</view>
						<view class="flex justify-end">
							<view class="button" style="margin-right: 20rpx;" v-if="item.status == 1">取消订单</view>
							<view class="button button2" v-if="item.status == 1">立即接单</view>
						</view>
					</view>
				</view>
				<nodata v-if="isno" />
			</view>
		</scroll-view>
		<!-- 点餐订单 -->
		<scroll-view scroll-y="true" class="list" v-if="indexs == 2" @scrolltolower="scrolltolower">
			<view v-for="(item,index) in DC" :key="index">
				<view class="list_item" v-if="status===111?1:item.status === status">
					<view class="OrderNo flex justify-between" style="margin-bottom: 20rpx;">
						<text class="No">
							<text>桌号：</text>
							<text style="color: #000;font-size: 30rpx;">{{item.table_name}}</text>
						</text>
						<text
							class="text">{{item.status==0?'待支付':item.status==3?'已完成(待评价)':item.status==1?'店家处理中':item.status==7?'已评价':'已取消'}}</text>
					</view>
					<view class="img flex" v-for="(i,t) in  item.goods" :key="t">
						<view class="image_div">
							<image :src="url+i.main_image" mode="" style="width: 168rpx;margin-bottom: 20rpx;"></image>
						</view>
						<view class="text_div">
							<view class="title flex-cb">
								<scroll-view scroll-y="true" style="height: 80rpx;overflow: hidden;">
									<text>{{i.title}}</text>
								</scroll-view>
								<view>￥{{i.price}}</view>
							</view>
							<view style="margin-top: 40rpx;">x{{i.number}}</view>
						</view>
					</view>
					<view class="solid"></view>
					<view class="flex-cb" style="margin-top: 20rpx;">
						<view class="num">订单备注</view>
						<text class="numbar " style="width: 300rpx;text-align: right;">{{item.remark}}</text>
					</view>
					<view class="flex-cb" style="margin-top: 20rpx;">
						<!-- <text class="num">共计<text v-for="(i,t) in 100" v-if="t == 99">
							{{item.goods[t].number?item.goods[t].number + item.goods[0].number:item.goods[0].number}}
						</text>件商品</text> -->
						<!-- <text class="numbar">￥{{item.amount}}</text> -->
						<text
							class="numbar">合计：￥{{item.discount_method==0?item.amount:item.discount_method==1?item.point_amount:item.vip_amount}}</text>
					</view>
					<view class="flex justify-end">
						<view class="button button2" @click="CL(item.id)" v-if="item.status == 1">去处理</view>
					</view>
				</view>
				<nodata v-if="isno" />
			</view>
		</scroll-view>
		<!-- 自提订单 -->
		<scroll-view scroll-y="true" class="list list2" v-if="indexs == 3" @scrolltolower="scrolltolower">
			<view v-for="(item,index) in ZT" :key="index">
				<view v-if="status==111?true:(status == item.status)" class="list_item flex flex-wrap"
					@click="handlenavigate(item.id)">
					<image :src="url+item.goods[0].main_image" mode=""></image>
					<view class="text_div">
						<view class="title flex-cb">
							<text>{{item.goods[0].title}}</text>
							<text
								class="text">{{item.status==0?'待支付':item.status==6?'已支付（待提货）':item.status==3?'已完成（待评价）':item.status==4?'退款中'
							:item.status==5?'退款完成':item.status==7?'已评价':item.status==-1?'已取消':'已退款'}}</text>
						</view>
						<view class="Specifications">规格：{{item.goods[0].attribute||item.service.items[0].name}}</view>
						<view class="money flex align-center">
							<text>原价:￥{{item.goods[0].price}} | </text>
							<text class="vip">会员价:￥{{item.goods[0].vip_price}}</text>
						</view>
						<view class="flex-cb">
							<view class="jifeng">积分最多抵扣￥{{item.goods[0].point_price||0}}</view>
							<view style="color: #999;font-size: 30rpx;">X{{item.goods[0].number}}</view>
						</view>
						<view class="Subtotal">
							<text class="num">共{{item.goods.length}}件</text>
							<text class="xiao">小计：</text>
							<text
								class="numbar">￥{{item.discount_method==0?item.amount:item.discount_method==1?item.point_amount:item.vip_amount}}</text>
						</view>

					</view>
					<view class="name_phone">
						<view class="name">提货人：{{item.service.merchant_contact_person||item.self_pick.user_nickname}}
						</view>
						<view class="pgone">提货人手机号：{{item.self_pick.user_phone||item.service.merchant_contact_phone}}
						</view>
					</view>
				</view>
				<nodata v-if="isno" />
			</view>
		</scroll-view>

		<tabbar isTab="2" :num="list" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				indexs: 0,
				isclass: 0,
				status: 111,
				tablist: [{
						tab: '物流',
						list: [{
								t: '全部',
								status: 111
							},
							{
								t: '待发货',
								status: 1
							},
							{
								t: '进行中',
								status: 2
							},
							{
								t: '退款',
								status: 4,
								// 订单状态 0待支付 1已支付(待配送) 2配送中 3已完成(待评价) 4退款中 5退款完成 6已支付(待取餐) 7已评价 -1已取消 -2拒绝退款
							}
						]
					},
					{
						tab: '配送',
						list: [{
								t: '全部',
								status: 111
							},
							{
								t: '待接单',
								status: 1
							},
							{
								t: '配送中',
								status: 2
							},
							{
								t: '已完成',
								status: 3
							},
							{
								t: '已取消',
								status: -1
							},
							{
								t: '已评价',
								status: 7
							},
							{
								t: '退款',
								status: 4,
								// 1待配送 2配送中 3已完成(待评价) 4退款中 5退款完成 7已评价 -1已取消 -2拒绝退款
							}
						]
					},
					{
						tab: '点餐',
						list: [{
								t: '全部',
								status: 111
							},
							{
								t: '待处理',
								status: 1
							},
							{
								t: '已处理',
								status: 3
							}
						]
					},
					{
						tab: '自提',
						list: [{
								t: '全部',
								status: 111
							},
							{
								t: '待自提',
								status: 6
							},
							{
								t: '已完成',
								status: 3
							},
							{
								t: '退款',
								status: 4
							}
						]
					}
				],
				iphone: 0,
				num: 0,
				WL: [],
				PS: [],
				DC: [],
				ZT: [],
				page: 1,
				limit: 10,
				last_page: 1,
				isno: 0, //是否显示无数据
				scrollLeft: 0,
				ishot: null, //红点
				list: 0, //tabbar红点参数
				num1: 0,
				num2: 0,
				num3: 0,
				num4: 0,

			};
		},
		onLoad(e) {
			if (e.type) {
				this.ishot = e.type
				if (this.ishot == 2 || this.ishot == 5) {
					this.indexs = 3
				} else if (this.ishot == 3) {
					this.indexs = 1
				} else if (this.ishot == 4) {
					this.indexs = 2
				}
			}
			this.$api.merchants_order_messages_unread_number().then(res => {
				console.log(res);
				this.list = res.data
			})
			this.url = this.$base
			this.iphone = getApp().globalData.iphone

		},
		onShow() {
			this.getOrderNotDoNum()
			this.WLlist()
			this.DClist()
			this.PSlist()
			this.ZTlist()
			this.isno = 0
		},
		methods: {
			// 获取各个订单未处理数量
			getOrderNotDoNum() {
				this.getNotNum1()
				this.getNotNum2()
				this.getNotNum3()
				this.getNotNum4()
			},
			getNotNum1() {
				this.$api.unReceiveNum1().then(res => {
					this.num1 = res.data
				})
			},
			getNotNum2() {
				this.$api.unReceiveNum3().then(res => {
					this.num2 = res.data
				})
			},
			getNotNum3() {
				this.$api.unReceiveNum4().then(res => {
					this.num3 = res.data
				})
			},
			getNotNum4() {
				this.$api.unReceiveNum2().then(res => {
					this.num4 = res.data
				})
			},
			WLlist(i) {
				this.$api.express_orders_list({
					page: this.page,
					limit: this.limit
				}, 1).then(res => {
					console.log(res);
					this.last_page = res.last_page

					if (res.list.length != 0) {
						this.isno = 0
						if (i == 1) {
							this.WL = [...this.WL, ...res.list]
						} else {
							this.WL = res.list
						}
					} else {
						this.isno = 1
					}
				})
			},
			PSlist(i) {
				this.$api.delivery_orders_list({
					page: this.page,
					limit: this.limit,
				}, 1).then(res => {
					this.last_page = res.last_page
					if (res.list.length != 0) {
						this.isno = 0
						if (i == 1) {
							this.PS = [...this.PS, ...res.list]
						} else {
							this.PS = res.list
						}
					} else {
						this.isno = 1
					}
				})
			},
			DClist(i) {
				this.$api.merchants_meal_orders_list({
					page: this.page,
					limit: this.limit,
				}, 1).then(res => {
					console.log(res);
					if (res.list.length != 0) {
						this.isno = 0
						if (i == 1) {
							this.DC = [...this.DC, ...res.list]
						} else {
							this.DC = res.list
						}
					} else {
						this.isno = 1

					}
				})
			},
			CL(id) { //点餐订单处理

				this.$api.meal_orders({}, id, 1).then(res => {
					if (res.code == 200001) {
						this.DC = []
						this.DClist()
					}
				})
			},
			ZTlist(i) {
				this.$api.merchants_self_pick_list({
					page: this.page,
					limit: this.limit,
				}, 1).then(res => {
					console.log(res);
					this.last_page = res.last_page
					if (res.list.length != 0) {
						this.isno = 0
						if (i == 1) {
							this.ZT = [...this.ZT, ...res.list]
						} else {
							this.ZT = res.list
						}
					} else {
						this.isno = 1
					}
				})
			},
			handletab(i) {
				if (this.indexs == i) return //防抖
				this.indexs = i
				this.isclass = 0
				this.isno = 0
				this.status = 111
				this.last_page = 1
				this.page = 1
				if (i == 0) {
					this.WL = []
					this.WLlist()
				}
				if (i == 1) {
					this.PS = []
					this.PSlist()
				}
				if (i == 2) {
					this.DC = []
					this.DClist()
				}
				if (i == 3) {
					this.ZT = []
					this.ZTlist()
				}


			},
			scrolltolower() {
				if (this.indexs == 0) {
					if (this.page == this.last_page) {
						return
					} else {
						this.page++
						if (this.status == 111) {
							this.WLlist(1)
						} else {
							this.$api.express_orders_list({
								page: this.page,
								limit: this.limit,
								status: this.status
							}).then(res => {
								console.log(res);
								this.last_page = res.last_page
								if (res.list.length != 0) {
									this.WL = [...this.WL, ...res.list]
								}
							})
						}
					}
				}
				if (this.indexs == 1) {
					if (this.page == this.last_page) {
						return
					} else {
						this.page++
						if (this.status == 111) {
							this.PSlist(1)
						} else {
							this.$api.delivery_orders_list({
								page: this.page,
								limit: this.limit,
								status: this.status
							}).then(res => {
								this.last_page = res.last_page
								if (res.list.length != 0) {
									this.PS = [...this.PS, ...res.list]
								}
							})
						}
					}
				}
				if (this.indexs == 2) {
					if (this.page == this.last_page) {
						return
					} else {
						this.page++
						if (this.status == 111) {
							this.DClist(1)
						} else {
							this.$api.merchants_meal_orders_list({
								page: this.page,
								limit: this.limit,
								status: this.status,
							}).then(res => {
								this.last_page = res.last_page
								if (res.list.length != 0) {
									this.DC = [...this.DC, ...res.list]
								}
							})
						}
					}
				}
				if (this.indexs == 3) {
					if (this.page == this.last_page) {
						return
					} else {
						this.page++
						if (this.status == 111) {
							this.ZTlist(1)
						} else {
							this.$api.merchants_self_pick_list({
								page: this.page,
								limit: this.limit,
								status: this.status
							}).then(res => {
								this.last_page = res.last_page
								if (res.list.length != 0) {
									this.ZT = [...this.ZT, ...res.list]
								}
							})
						}
					}

				}
			},
			tabSelect(e) {
				if (this.isclass == e.currentTarget.dataset.id) return //防抖
				this.isclass = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.status = this.tablist[this.indexs].list[this.isclass].status
				this.page = 1
				this.isno = 0
				if (this.indexs == 0) {
					if (this.status == 111) {
						this.WLlist()
					} else {
						this.$api.express_orders_list({
							page: this.page,
							limit: this.limit,
							status: this.status
						}).then(res => {
							this.last_page = res.last_page
							if (res.list.length != 0) {
								this.WL = res.list
								this.isno = 0
							} else {
								this.isno = 1
							}
						})
					}
				}
				if (this.indexs == 1) {
					if (this.status == 111) {
						this.PSlist()
					} else {
						this.$api.delivery_orders_list({
							page: this.page,
							limit: this.limit,
							status: this.status
						}).then(res => {
							this.last_page = res.last_page
							if (res.list.length != 0) {
								this.PS = res.list
								this.isno = 0
							} else {
								this.isno = 1
							}
						})
					}
				}
				if (this.indexs == 2) {
					if (this.status == 111) {
						this.DClist()
					} else {
						this.$api.merchants_meal_orders_list({
							page: this.page,
							limit: this.limit,
							status: this.status
						}).then(res => {
							this.last_page = res.last_page
							if (res.list.length != 0) {
								this.DC = res.list
								this.isno = 0
							} else {
								this.isno = 1
							}
						})
					}
				}
				if (this.indexs == 3) {
					if (this.status == 111) {
						this.ZTlist()
					} else {
						this.$api.merchants_self_pick_list({
							page: this.page,
							limit: this.limit,
							status: this.status
						}).then(res => {
							this.last_page = res.last_page
							if (res.list.length != 0) {
								this.ZT = res.list
								this.isno = 0
							} else {
								this.isno = 1
							}
						})
					}
				}
			},
			handlenavigate(e) {
				if (this.indexs == 0) {
					uni.navigateTo({
						url: '/pageA/order/WL_details?id=' + e
					})
				} else if (this.indexs == 1) {
					uni.navigateTo({
						url: '/pageA/order/PS_details?id=' + e
					})
				} else if (this.indexs == 2) {

				} else {
					uni.navigateTo({
						url: '/pageA/order/ZT_details?id=' + e
					})
				}

			},
			nullfun(i) {
				let t = 0
				if (i == 111) {
					if (this.ZT.length != 0) {
						this.isno = 0
					}
				} else {
					for (let i = 0; i < this.ZT.length; i++) {
						if (this.ZT[i].status == this.status) {
							t++
							if (t >= 1) {
								this.isno = 0
								return
							}
						} else {
							this.isno = 1
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.point {
		font-size: 22rpx;
		text-align: center;
		color: #fff;
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		top: 1%;
		background-color: red;
		border-radius: 50%;
	}

	.order {
		width: 750rpx;
		height: 96rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 1rpx;

		.wl_order {
			margin-right: 230rpx;
		}

		.isthis {
			font-size: 30rpx;
			font-weight: bold;
		}

		.zt_order {
			position: relative;
		}

		.hot {
			position: absolute;
			top: 0;
			right: -15rpx;
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			background-color: #FF2E2E;
		}
	}

	.tab_list {
		padding: 0 56rpx;
		overflow: hidden;
		white-space: nowrap;

		view {
			height: 96rpx;
			padding-top: 40rpx;
		}

		.thre {
			margin-right: 100rpx;
		}

		.thre:nth-last-of-type(1) {
			margin-right: 0;
		}

		.isthis {
			font-size: 30rpx;
			font-weight: bold;
			color: #1CD699;
		}
	}

	.list {
		padding: 10rpx 22rpx 80rpx 22rpx;
		overflow: hidden;
		height: calc(100vh - 390rpx);

		.list_item {
			width: 706rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 10rpx 0;
			padding: 26rpx 17rpx 24rpx 26rpx;

			.OrderNo {
				.No {
					font-size: 24rpx;
					color: #999;
				}

				.text {
					font-size: 34rpx;
					color: #1CD699;
					font-weight: 500;
				}
			}

			.img {
				.image_div {
					margin-right: 22rpx;

					image {
						border-radius: 10rpx;
						width: 136rpx;
						height: 168rpx;
					}
				}

				.text_div {
					margin-top: 10rpx;
					flex: 1;

					.title {
						text {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}

						view {
							font-size: 30rpx;
							color: #999;
						}
					}

				}


			}

			.Subtotal {
				text-align: right;
				font-size: 28rpx;

				.num {
					color: #999;
					width: 180rpx;
					white-space: nowrap;
				}

				.xiao {
					color: #333;
					margin: 0 10rpx;
				}

				.numbar {
					color: #FF2E2E;
				}
			}

			.button {
				margin-top: 23rpx;
				width: 180rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 2px solid #B8B8B8;
				color: #999;
				text-align: center;
				line-height: 60rpx;
			}

			.button2 {
				border: none;
				background: #1CD699;
				color: #fff;
			}
		}
	}

	.list2 {
		.list_item {
			image {
				width: 136rpx;
				height: 168rpx;
				border-radius: 10rpx;
			}

			.text_div {
				flex: 1;
				margin-left: 22rpx;

				.title {
					text {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					.text {
						color: #1CD699;
						font-size: 34rpx;
						font-weight: 500;
					}
				}

				.Specifications {
					font-size: 24rpx;
					color: #999;
					height: 33rpx;
				}

				.money {
					margin-top: 12rpx;
				}

				.Subtotal {
					margin-top: 51rpx;
				}
			}

			.name_phone {
				height: 101rpx;
				font-size: 28rpx;
				margin-top: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 61rpx;
			}
		}

	}

	.money {
		height: 40rpx;
		margin-top: 23rpx;
		margin-bottom: 7rpx;
		font-size: 28rpx;
		line-height: 40rpx;

		.vip {
			margin-left: 10rpx;
			color: #FF2E2E;
			font-size: 26rpx;
		}
	}

	.jifeng {
		font-size: 24rpx;
		color: #FF6F10;
		font-weight: 500;
	}
</style>
